<template>
  <div class="home-container">
      <van-nav-bar class="app-nav-bar">
        <van-button
        slot="title"
        class="search-btn"
        icon="search"
        type="info"
        round
        size="small"
        >搜索</van-button>
      </van-nav-bar>
  <!-- 文章频道列表 -->
        <van-tabs v-model="active" class="channel-tabs">
          <van-tab v-for="(item,index) in channels" :key="index" :title="item.name" class="van-tab"><article-list :channels="item"/></van-tab>
       </van-tabs>
       <!-- 文章频道列表end -->


  </div>
</template>

<script>
import { getUserChannels } from "@/api/user"
import ArticleList from "@/views/Home/components/article-list"
export default {
   data() {
      return {
        active: 0,
        channels:[]//频道列表
      };
    },
    components:{
      ArticleList
    },
    created(){
      this.loadChannels();
    },
    methods:{
        async loadChannels(){
          // 请求获取频道数据
          const {data} = await getUserChannels();
          this.channels = data.data.channels;
          // console.log(this.channels)
        }
    }
}
</script>

<style lang="less" scoped>
  /deep/.van-nav-bar__title{
    max-width: none;
  }
  .search-btn{
    width: 277px;
    height:32px;
    background: #5babfb;
  }
  .channel-tabs{
    /deep/.van-tab{
      border:1px solid #edeff3;
      border-top:none;
      border-left:none;
    }
    /deep/.van-tabs__line{
      width: 15px !important;
      height: 3px;
      background: #3296fa;
      bottom: 20px;
    }
  }
</style>